{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>图片</li>
  </ol>
<section class="demo-section">
<div id="pageContent">




<section><header><h3>圆角图片</h3></header><article><div class="example"><img src="__IMG__/120x120icon.png" width="200px" height="200px" class="img-rounded" alt="圆角图片"></div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://zui.sexy/docs/img/img1.jpg"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"200px"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"200px"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-rounded"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"圆角图片"</span><span class="tag">&gt;</span></code></pre></article></section>



<section><header><h3>圆形图片</h3></header><article><div class="example"><img src="__IMG__/120x120icon.png" width="200px" height="200px" class="img-circle" alt="圆形图片"></div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://zui.sexy/docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"200px"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"200px"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-circle"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"圆形图片"</span><span class="tag">&gt;</span></code></pre></article></section>



<section><header><h3>缩略图</h3></header><article><div class="example"><img src="__IMG__/120x120icon.png" width="200px" height="200px" class="img-thumbnail" alt="缩略图"></div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://zui.sexy/docs/img/img3.jpg"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"200px"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"200px"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-thumbnail"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"缩略图"</span><span class="tag">&gt;</span></code></pre></article></section>




<section><header><h3>响应式图片</h3></header><article><p>图片最大宽度将不会超过父级容器。</p><div class="example">
  <div style="width: 250px;" class="panel">
    <div class="panel-heading">我的宽度限定为250px</div>
    <img src="__IMG__/120x120icon.png" class="img-responsive" alt="响应式图片测试">
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://zui.sexy/docs/img/img4.jpg"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"200px"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"200px"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-responsive"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"响应式图片测试"</span><span class="tag">&gt;</span></code></pre><div class="alert with-icon">
</div></article></section></div>
</section>
{/block}